<template>
  <div class="grid-layout-container" :class="[`columns-${columns}`]">
    <slot></slot>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  // 列数：2-6
  columns: {
    type: Number,
    default: 3,
    validator: (val) => val >= 2 && val <= 6
  }
});
</script>

<style scoped>
.grid-layout-container {
  display: grid;
  width: 100%;
  gap: 15px;
  margin-bottom: 15px;
}

.columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .columns-5, .columns-6 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 992px) {
  .columns-4, .columns-5, .columns-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-layout-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .grid-layout-container {
    grid-template-columns: 1fr;
  }
}

/* 提供列跨度类 */
:deep(.span-1) {
  grid-column: span 1;
}

:deep(.span-2) {
  grid-column: span 2;
}

:deep(.span-3) {
  grid-column: span 3;
}

:deep(.span-4) {
  grid-column: span 4;
}

:deep(.span-5) {
  grid-column: span 5;
}

:deep(.span-6) {
  grid-column: span 6;
}

:deep(.span-full) {
  grid-column: 1 / -1;
}

/* 行跨度类 */
:deep(.row-span-1) {
  grid-row: span 1;
}

:deep(.row-span-2) {
  grid-row: span 2;
}

:deep(.row-span-3) {
  grid-row: span 3;
}
</style> 